var that

class tab{
   
    constructor(id){
        that = this
       
        this.main = document.querySelector(id)
             // li的父元素
             this.ul = this.main.querySelector('.fisrstnav ul:first-child');
             // section 父元素
          
        this.fsection = this.main.querySelector('.tabscon');
        this.add = this.main.querySelector('.tabadd');
        // 调用初始化
        this.init()
    } 
init(){
this.updateNode()
this.add.onclick = this.addTab
for(var i=0;i<this.lis.length;i++){
    this.lis[i].index=i
    this.lis[i].onclick = this.doToggle
}
}
updateNode(){
    this.lis = this.main.querySelectorAll('li')
    this.sections = this.main.querySelectorAll('section')
}
doToggle(){

   that.clearClass()
    this.className = 'liactive'
    that.sections[this.index].className = 'conactive'
    // console.log(this);
}
clearClass(){
    for(var i=0;i<that.lis.length;i++){
        that.lis[i].className = ''
        that.sections[i].className = ''
    }
}
// 增加
addTab() {
    that.clearClass();
    // (1) 创建li元素和section元素 
    var random = Math.random();
    var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';
    var section = '<section class="conactive">测试 ' + random + '</section>';
    // (2) 把这两个元素追加到对应的父元素里面
    that.ul.insertAdjacentHTML('beforeend', li);
    that.fsection.insertAdjacentHTML('beforeend', section);
    that.init();
}
}
var nav = new tab('#tab')